<template>
	<view>
		<!-- 导航 -->
		<van-nav-bar title="我的订单" left-text="返回" left-arrow @click-left="onClickLeft">
			<template #right>
				<van-icon name="search" size="18" />
			</template>
		</van-nav-bar>
		<!-- 头部 -->
		<van-tabs v-model:active="active" sticky>
			<van-tab v-for="(item, index) in category" :title="item.name" :key="index">
				<view class="order-img" v-if="orderList.length == 0">
					<image src="../../static/orders.jpg" mode=""></image>
				</view>
				<van-card v-else v-for="item in orderList" :key="item.goods_info.id" :num="item.goods_info.num"
					:price="item.goods_info.goods_price" :desc="item.goods_styles" :title="item.goods_info.goods_name"
					class="goods-card" :thumb="item.goods_info.goods_images">
					<template #footer>
						<van-button plain hairline type="primary" size="small">
							{{active == 0 ? "联系客服": active == 1?"申请售后": active==2?"延迟收货":active==3?"联系客服":"联系客服"}}
						</van-button>
						<van-button @click="orderInfo(item)" plain hairline type="primary" size="small">
							{{active == 0 ? "修改地址": active == 1?"订单详情": active==2?"查看物流":active==3?"再次购买":"再次购买"}}
						</van-button>
						<van-button @click="goPay(item)" type="primary" size="small">
							{{active == 0 ? "去支付": active == 1?"催发货": active==2?"确认收货":active==3?"去评价":"售后"}}
						</van-button>
					</template>
				</van-card>
			</van-tab>
		</van-tabs>
	</view>
</template>

<script>
	import api from "../../api/api.js";
	import {
		showNotify,
		showConfirmDialog
	} from 'vant';
	export default {
		data() {
			return {
				active: 0,
				category: [{
						status: 1,
						name: "待付款"
					}, {
						status: 2,
						name: "待发货"
					},
					{
						status: 3,
						name: "待收货"
					},
					{
						status: 4,
						name: "待评价"
					},
					{
						status: 5,
						name: "退货"
					},
				],
				orderList: [],
				goodsList: [],
			}
		},
		methods: {
			// 返回上一页
			onClickLeft() {
				history.back();
			},
			// 获取不同状态商品
			getStatusOrder() {
				api.orderStatus({
					status: this.active + 1
				}).then(res => {
					this.orderList = res.data.data.order_list;
				})
			},
			// 跳转支付页
			goPay(item) {
				if (this.active == 0) {
					uni.navigateTo({
						url: "/pages/goods/good_order/good_order?key_id=" + item.key_id,
					})
				} else if (this.active == 1) {
					uni.$showMsg("催单成功");
				} else if (this.active == 2) {

					showConfirmDialog({
							message: '确保订单已收到货',
						}).then(() => {
							uni.$showMsg("收货成功");
						})
						.catch(() => {
							showNotify({
								type: 'success',
								message: '再想想'
							});
						});
				}
			},
			orderInfo(item) {
				if (this.active == 1) {
					uni.navigateTo({
						url: "/pages/order/deliver/deliver?key_id=" + item.key_id,
					});
				} else if (this.active == 2) {
					uni.navigateTo({
						url: `/pages/order/logistics/logistics?order_id=${item.order_id}&active=${this.active}`,
					});
				}
			}
		},
		onLoad() {
			this.getStatusOrder();
		},
		watch: {
			active(newVal, oldVal) {
				this.getStatusOrder();
			}
		}
	}
</script>

<style>
	.goods-card {
		margin: 10rpx 0;
		background-color: white;
	}

	.order-img {
		width: 100%;
		height: 800px;
	}

	.order-img image {
		width: 100%;
		height: 800rpx;
	}
</style>